<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue透传,插槽,依赖注入</title>
</head>
<style>
    /* .one{
        width: 100px;
    }
    .two{
        width: 200px;
    } */
</style>
<body>
    <div id="app">
        <e-comp class="two" foo="123" @click="n++"></e-comp>
        <div>{{n}}</div>
        <multi class="one"></multi>
        <e-slot>
            <!-- hello -->
            <!-- <p>hello world</p> -->
            <!-- <div>{{msg}}</div> -->
            <!-- <div>{{n}}</div> -->
        </e-slot>
        <e-page>
            <template #header="{row}">头部内容{{row.name}}</template>
            <template v-slot:main>主体内容</template>
            <template v-slot:footer>底部内容</template>
            <template v-slot:default>默认插槽</template>
        </e-page>
    </div>
    <script src="./vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            data(){
                return {
                    n:1,
                    val:10
                }
            },
            methods:{
                add(){
                    this.num++;
                }
            },
            provide(){
                return {
                    val:this.val,
                    add:this.add
                }
            }
        });
        app.component("e-comp", {
            template:`<div class='one'>
                组件
                <button v-bind="$attrs">按钮</button>
                <test></test>
                </div>`,
            // template:`<test></test>`,
            inheritAttrs: false
        })
        app.component("test", {
            template:`<p>test{{val}}</p>`,
            inject:["val",]
        })
        app.component("multi", {
            template:`
                <div>one</div>
                <div v-bind="$attrs">two</div>
            `,
            mounted(){
                console.log(this.$attrs)
            }
        })
        app.component("e-slot",{
            template:`<div class="row">
                    <slot>默认内容</slot>
                </div>`,
            data(){
                return{msg:"hello"}
            }
        })
        app.component("e-page",{
            template:`
                <header>
                    <slot name="header" :row="student"></slot>
                </header>
                <main>
                    <slot name="main"></slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
                <slot></slot>
                `,
            data(){
                return{student:{name:"zhangsan",age:20}}
            }
        })
        app.mount('#app');
    </script>
</body>

</html>